<template>
	<view class="waterfall">
		<view class="waterfall-column">
			<PostItem v-for="(item, index) in leftColumnPosts" :key="'left-' + index" :post="item" :width="itemWidth"
				@click="handlePostClick" />
		</view>
		<view class="waterfall-column">
			<PostItem v-for="(item, index) in rightColumnPosts" :key="'right-' + index" :post="item" :width="itemWidth"
				@click="handlePostClick" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits, computed } from 'vue'
	import PostItem from './PostItem.vue'
	import type { PostBasicInfo } from '@/api/post/post'

	// Props定义
	interface Props {
		posts : PostBasicInfo[]
		itemWidth : number
	}

	const props = withDefaults(defineProps<Props>(), {
		posts: () => [],
		itemWidth: 150
	})

	// 事件定义
	const emit = defineEmits<{
		postClick : [post: PostBasicInfo]
	}>()

	// 将帖子分配到两列
	const leftColumnPosts = computed(() => {
		return props.posts.filter((_, index) => index % 2 === 0)
	})

	const rightColumnPosts = computed(() => {
		return props.posts.filter((_, index) => index % 2 === 1)
	})

	// 方法
	const handlePostClick = (post : PostBasicInfo) : void => {
		emit('postClick', post)
	}
</script>

<style lang="scss" scoped>
	.waterfall {
		padding: 16rpx 24rpx;
		display: flex;
		gap: 16rpx;
		background-color: #f7f7f7;
		min-height: 1000rpx;

		.waterfall-column {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 16rpx;
		}
	}
</style>